<template>
    <div class="leftContentOne">
        <!--第一部分-->
        <div class="province">
            <div class="twoCharts">
                <!--第二个图表-->
                <div class="secondChart lf">
                    <div class="chartTitle2">
                        <div class="littleLine lf"></div>
                        <div class="chartTitle lf">站点评价统计</div>
                        
                    </div>
                    <div class="threeLine">
                        <div class="firstLine lf"></div>
                        <div class="secondLine lf"></div>
                        <div class="thirdLine lf"></div>
                    </div>
                    <div id="chart2"></div>
                </div>
            </div>
        </div>
        
    </div>
</template>

<script>
let echarts = require('echarts');
import axios from 'axios'
export default {
    name: 'LeftContentOne',
    computed:{
        StationQXDJCounts(){
            return this.$store.state.StationQXDJCounts
        }
    },
    data(){
        return{
            isShis:false,
            isCityActive: 0,
            
            
        }
    },
   
    watch:{
        StationQXDJCounts: function(){
            this.getChart1DataInfo();
        },
    },
    methods: {
        
        
        getChart1DataInfo(){
            
            var  StationQXDJCounts = [
                {value:0, name:'特别清新'},
                {value:0, name:'清新'},
                {value:0, name:'较清新'},
                {value:0, name:'一般'},
                {value:0, name:'不清新'}
            ];
            for(let j=0;j<this.StationQXDJCounts.length;j++){
                switch(this.StationQXDJCounts[j].DJ){
                    case '特别清新':{
                        StationQXDJCounts[0].value=this.StationQXDJCounts[j].Count;
                        break;
                    }
                    case '清新':{
                        StationQXDJCounts[1].value=this.StationQXDJCounts[j].Count;
                        break;
                    }
                    case '较清新':{
                        StationQXDJCounts[2].value=this.StationQXDJCounts[j].Count;
                        break;
                    }
                    case '一般':{
                        StationQXDJCounts[3].value=this.StationQXDJCounts[j].Count;
                        break;
                    }
                    case '不清新':{
                        StationQXDJCounts[4].value=this.StationQXDJCounts[j].Count;
                        break;
                    }
                }
            }
            let myChart2 = echarts.init(document.getElementById('chart2'));       
            
            let option2={
                tooltip : {
                    trigger: 'item',
                    formatter: "{a} <br/>{b} : {c} ({d}%)"
                },
                color:[this.$comjs.color1, this.$comjs.color2, this.$comjs.color3, this.$comjs.color4, this.$comjs.color5],
                legend: {
                    orient: 'vertical',
                    itemWidth: 14,//图例大小
                    itemHeight: 10,
                    itemGap: 2,//图例之间的间距
                    left: 0,//图例距离容器距离
                    x : '',
                    y : 'top',
                    textStyle:{
                        color:'#fff',
                        fontSize: 12
                    },
                    data: [ { name:'特别清新', icon: 'rect'},
                            { name:'清新',     icon: 'rect'},
                            { name:'较清新',   icon: 'rect'},
                            { name:'一般',     icon: 'rect'},
                            { name:'不清新',   icon: 'rect'}]
                },
                calculable : true,
                series : [
                    {
                        name: '站点评价统计',
                        type: 'pie',
                        radius : [0,'100%'],
                        center: ['50%', '50%'],
                        hoverAnimation: false,
                        label: {
                            normal: {
                                show: false,
                                position: 'inside'
                            },
                            emphasis: {
                                show: true
                            }
                        },
                        lableLine: {
                            normal: {
                                show: false
                            },
                            emphasis: {
                                show: true
                            }
                        },
                        data:StationQXDJCounts,
                        itemStyle: {
                            emphasis: {
                                shadowBlur: 10,
                                shadowOffsetX: 0,
                                shadowColor: 'rgba(0, 0, 0, 0.5)'
                            }
                        }
                    }
                ]
            }
            myChart2.setOption(option2)
            
            // if(document.documentElement.clientHeight <= 700){
            //         option2.legend.itemWidth = 8;
            //         option2.legend.itemHeight = 3;
            //         option2.legend.itemGap=0;
            // }else {
                    
            //         option2.legend.itemWidth = 12;
            //         option2.legend.itemHeight = 8;
            //         option2.legend.itemGap=2;
            // }
            
            window.addEventListener("resize", function () {   
                
                myChart2.resize();
            });   
        }
    }
}
</script>

<style lang="stylus" scoped>
    /* 样式穿透 */
    .leftContentOne >>> .littleLine
        width: .02rem
        height: .16rem
        background : #41E6FD
        margin-left: .11rem
        margin-right: .05rem
    .leftContentOne >>> .secondChart
        .littleLine
            margin-left: .06rem
    .leftContentOne >>> .chartTitle
            height: .16rem
            line-height : .16rem
    /* 所有样式 */
    .leftContentOne
        width: 4.25rem
        height: 20vh
        color: white
        // background :rgba(7,23,42,0.49)
        .province
            height: 20vh
            
            .twoCharts
                height:25vh
                .secondChart
                    width: 4.25rem
                    height: 15vh
                    padding-top: .25rem
                    
                    .chartTitle2
                        width: 4.25rem
                        height: 3vh
                        font-size: .18rem
                    .threeLine
                        width: 100%
                        height: .03rem
                        .firstLine
                            width: 3.4rem
                            height: .03rem
                            background : #41E6FD
                        .secondLine
                            width: .08rem
                            height: .03rem
                            background: rgba(255,255,255,.54)
                            margin-left: .06rem
                            margin-right: .04rem
                        .thirdLine
                            width: .64rem
                            height: .03rem
                            background: #FFFFFF
                    #chart2
                        margin-top:20px
                        margin-left:20px
                        width:  4.25rem
                        height: 26vh
                        
</style>


